import React, { useState } from 'react';
import { Icon, Image } from '@ray-js/smart-ui'; // 导入 SmartUI 提供的导航栏和按钮组件
import { View, Text } from '@ray-js/ray';
import menuIcon from '../../res/imgs/ic_main_menu.png';
import styles from './index.module.less'; // 引入模块化样式
import meun1 from '../../res/menu/menu_1.png';
import meun2 from '../../res/menu/menu_2.png';
import meun3 from '../../res/menu/menu_3.png';
import meun4 from '../../res/menu/menu_4.png';
import meun5 from '../../res/menu/menu_5.png';
import meun6 from '../../res/menu/menu_6.png';
import meun7 from '../../res/menu/menu_7.png';
import meun8 from '../../res/menu/menu_8.png';
import meun9 from '../../res/menu/menu_9.png';
import meun10 from '../../res/menu/menu_10.png';
import IconButtonRow from '../IconButtonRow/IconButtonRow';
import Strings from '@/i18n';

export function MenuView({ onButtonClick, index }: { onButtonClick: (id: number) => void, index: number }) {
  const [isOpen, setIsOpen] = useState(false);
  console.log("菜单按钮接收到index", index);

  // 按钮配置数组
  const buttonConfig = [
    {
      icon: meun1,
      text: Strings.getLang('m_home'),
      id: "1",
      onClick: () => {
        setIsOpen(false);
        setTimeout(() => onButtonClick(1), 0); // 先关闭菜单，再调用回调
      },
    },
    {
      icon: meun2,
      text: Strings.getLang('m_flame'),
      onClick: () => {
        setIsOpen(false);
        setTimeout(() => onButtonClick(2), 0); // 先关闭菜单，再调用回调
      },
      id: "2",
    },
    {
      icon: meun3,
      text: Strings.getLang('m_crackling_sound'),
      onClick: () => {
        setIsOpen(false);
        setTimeout(() => onButtonClick(3), 0); // 先关闭菜单，再调用回调
      },
      id: "3",
    },
    {
      icon: meun4,
      text: Strings.getLang('m_fuel_bed'),
      onClick: () => {
        setIsOpen(false);
        setTimeout(() => onButtonClick(4), 0); // 先关闭菜单，再调用回调
      },
      id: "4",
    },
    {
      icon: meun5,
      text: Strings.getLang('m_glowing_logs'),
      onClick: () => {
        setIsOpen(false);
        setTimeout(() => onButtonClick(5), 0); // 先关闭菜单，再调用回调
      },
      id: "5",
    },
    {
      icon: meun6,
      text: Strings.getLang('m_down_light'),
      onClick: () => {
        setIsOpen(false);
        setTimeout(() => onButtonClick(6), 0); // 先关闭菜单，再调用回调
      },
      id: "6",
    },
    {
      icon: meun7,
      text: Strings.getLang('m_mood_light'),
      onClick: () => {
        setIsOpen(false);
        setTimeout(() => onButtonClick(7), 0); // 先关闭菜单，再调用回调
      },
      id: "7",
    },
    {
      icon: meun8,
      text: Strings.getLang('m_set_flame_program'),
      onClick: () => {
        setIsOpen(false);
        setTimeout(() => onButtonClick(8), 0); // 先关闭菜单，再调用回调
      },
      id: "8",
    },
    {
      icon: meun9,
      text: Strings.getLang('m_set_heater_program'),
      onClick: () => {
        setIsOpen(false);
        setTimeout(() => onButtonClick(9), 0); // 先关闭菜单，再调用回调
      },
      id: "9",
    },
    {
      icon: meun10,
      text: Strings.getLang('m_temperature_unit'),
      onClick: () => {
        setIsOpen(false);
        setTimeout(() => onButtonClick(10), 0); // 先关闭菜单，再调用回调
      },
      id: "10",
    },
  ];

  // 切换菜单状态
  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  // 点击遮罩层关闭菜单
  const closeMenu = () => {
    setIsOpen(false);
  };
  // top: `${topH}px`
  return (
    <>
      <View hoverClassName={styles.pressed} hoverStayTime={5} onClick={toggleMenu} >
        <Icon
          customClass={styles.menu}
          size="105rpx"
          name={menuIcon}
        />
      </View>

      {isOpen && <View className={styles.outlayout} onClick={closeMenu} />}
      {isOpen && (
        <View className={styles.menuOverlay}>
          <View className={styles.menuBackground}>
            <Text>MY FIREPLACE</Text>
          </View>
          <View style={{ width: '1px', height: '10rpx' }} />
          {buttonConfig.map(config => (
            <IconButtonRow key={config.id + ""} {...config} index={index + ""} />
          ))}
        </View>
      )}
    </>
  );
}

export default MenuView;